<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <script>
        window.onload=function(){
            var acc = new Vue({
                el: '#app1',
                methods:{
                    reverseMessage:function(){
                        this.message=this.message.split('').reverse().join('')
                    },
                    addpeople:function (){
                        var x={name:this.username,age:this.age,time:new Date()};
                        this.peoples.push(x);
                    },
                    removeall:function(){
                        this.peoples=[];
                    },
                    remove:function(index){
                        this.peoples.splice(index,1);
                    }
                },
                data: {
                    username:'',
                    age:'',
                    peoples:[
                        {name:'xx',age:32,time:new Date()},
                        {name:'aa',age:32,time:new Date()}
                    ]
                }
            });
        };
    </script>
</head>
<body>
<div id="app1">
    <table>
        <tr>
            <td><input v-model="username"></td>
            <td><input v-model="age"></td>
        </tr>
        <tr>
            <td><input type="button" v-on:click="addpeople"  value="添加">
            <input type="button"  v-on:click="removeall"  value="重置"></td>
        </tr>
    </table>
    <br>
    <table border="1">
        <tr>
            <th>序号</th><th>姓名</th><th>年龄</th><th>时间</th><th>操作</th>
        </tr>
        <tr v-for="(people,index) in peoples">
            <td>{{index+1}}</td>
            <td>{{people.name}}</td>
            <td>{{people.age}}</td>
            <td>{{people.time.getHours()+":"+people.time.getMinutes()+":"+people.time.getSeconds()}}</td>
            <td><input type="button"  v-on:click="remove(index)" value="删除"></td>
        </tr>
    </table>
</div>
</body>
</html>